/**
* @description : 树状结构展示并可选
* @descriptionDetail : 树状结构展示并可选
* @copyright : 浙江烟草
* @author : mc
* @create : 2022-12-05 16:21:33
*/
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="right-icon" @click="confirm">
				确定
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="content u-page">
			<view class="back-con" v-show="!isRoot">
				<view class="back-btn" @click="backToParent">
					返回上一级
				</view>
			</view>
			<u-cell-group>
				<u-cell-item v-for="(treeNode,index) in treeNodes" :key="index" @click="clickNode(treeNode)">
					<view style="width: 100%;" slot="title">
						<view>
							<u-icon :name="selectVal == treeNode.val ? 'radio' : 'kongradio'" custom-prefix="csbi-icon" size="45" :color="selectVal == treeNode.val ? $theme.u_type_primary:$theme.u_tips_color" v-if="!treeNode.children"></u-icon>
							<text style="margin-left: 5px;">
								{{ treeNode.txt }}
							</text>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			fabButton
		},
		onLoad(opt) {
			this.treeNodes = this.orgData = this.getRouteParam();
		},
		data() {
			return {
				isRoot: true,
				treeNodes: [],
				orgData: [],
				treeMap: {},
				selectVal: "",
				selectTxt: "",
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			}
		},
		mounted() {
			this.setRightBtns();
			this.init()
		},
		methods: {
			init() {
				this.orgData.forEach(_td => this.getNode(_td));
			},
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					this.confirm();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.confirm();
				}
			},
			clickNode(node) {
				this.isRoot = false;
				// TODO 没有子节点点击则是选中项
				if (!node.children) {
					if (this.selectVal == node.val) {
						this.selectVal = "";
						this.selectTxt = "";
					} else {
						this.selectVal = node.val;
						this.selectTxt = node.txt;
					}
					return;
				}
				this.selectVal = "";
				this.selectTxt = "";
				this.treeNodes = node.children;
			},
			getSelectTxt() {
				if (this.$u.test.isEmpty(this.selectVal)) return;
				for (let i = 0; i < this.treeNodes.length; i++) {
					if (this.treeNodes[i].val == this.selectVal) {
						this.selectTxt = this.treeNodes[i].txt;
						break;
					}
				}
			},
			/**
			 * 从树中获取所有的节点
			 * @param _treeNode
			 */
			getNode(treeNode) {
				this.treeMap[treeNode.val] = treeNode;
				if (treeNode.children) {
					treeNode.children.forEach(n => this.getNode(n));
				}
			},
			/**
			 * 返回上一级
			 */
			backToParent() {
				let pNode = this.treeMap[this.treeNodes[0].pCode];
				if (this.treeMap[pNode.pCode]) {
					this.treeNodes = this.treeMap[pNode.pCode].children;
				} else {
					this.isRoot = true;
					this.treeNodes = this.orgData;
				}
				this.selectVal = "";
				this.selectTxt = "";
			},
			confirm() {
				if (this.$u.test.isEmpty(this.selectVal)) {
					this.$modal.alert("请选择");
					return;
				}
				this.backPrev({
					paramKey: "treeVal",
					param: {
						value: this.selectVal,
						text: this.selectTxt,
					},
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.back-con {
		box-sizing: border-box;
		padding-left: 15px;
		min-height: 44px;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.back-btn {
		color: #2ca5fc;
	}

	.right-icon {
		padding: 0 25rpx;
		font-size: 30rpx;
		color: white;
	}
</style>
